<template>
	<view class="container">
		<view class="section device-control">
			<view class="section-title">设备管理</view>
			<view class="device-grid">
				<view class="device-item" v-for="(device, index) in devices" :key="index">
					<image :src="device.icon" mode="aspectFit"></image>
					<text>{{device.name}}</text>
					<switch :checked="device.status" @change="toggleDevice(index)" />
				</view>
			</view>
		</view>
		
		<view class="section booking">
			<view class="section-title">教室预约</view>
			<view class="booking-form">
				<uni-forms ref="form" :modelValue="bookingForm">
					<uni-forms-item label="教室">
						<uni-easyinput v-model="bookingForm.room" placeholder="请选择教室" />
					</uni-forms-item>
					<uni-forms-item label="日期">
						<uni-datetime-picker v-model="bookingForm.date" type="date" />
					</uni-forms-item>
					<uni-forms-item label="时段">
						<uni-data-checkbox v-model="bookingForm.timeSlot" :localdata="timeSlots" />
					</uni-forms-item>
				</uni-forms>
				<button class="submit-btn" @click="submitBooking">提交预约</button>
			</view>
		</view>
		
		<view class="section analysis">
			<view class="section-title">课堂行为分析</view>
			<view class="analysis-cards">
				<view class="card" v-for="(stat, index) in statistics" :key="index">
					<text class="card-title">{{stat.title}}</text>
					<text class="card-value">{{stat.value}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			devices: [
				{ name: '空调', icon: '/static/icons/ac.png', status: false },
				{ name: '投影仪', icon: '/static/icons/projector.png', status: false },
				{ name: '照明', icon: '/static/icons/light.png', status: false },
				{ name: '电脑', icon: '/static/icons/computer.png', status: false }
			],
			bookingForm: {
				room: '',
				date: '',
				timeSlot: ''
			},
			timeSlots: [
				{ text: '第一节 8:00-9:40', value: '1' },
				{ text: '第二节 10:00-11:40', value: '2' },
				{ text: '第三节 14:00-15:40', value: '3' },
				{ text: '第四节 16:00-17:40', value: '4' }
			],
			statistics: [
				{ title: '出勤率', value: '95%' },
				{ title: '专注度', value: '88%' },
				{ title: '互动次数', value: '32次' },
				{ title: '课堂活跃度', value: '4.5分' }
			]
		}
	},
	methods: {
		toggleDevice(index) {
			this.devices[index].status = !this.devices[index].status
			// TODO: 调用物联网控制接口
		},
		submitBooking() {
			// TODO: 调用预约接口，接入人脸识别
			uni.showToast({
				title: '预约成功',
				icon: 'success'
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	
	.section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
	}
	
	.device-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		
		.device-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #f8f8f8;
			border-radius: 10rpx;
			
			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
	}
	
	.booking-form {
		.submit-btn {
			margin-top: 30rpx;
			background: #007AFF;
			color: #FFFFFF;
		}
	}
	
	.analysis-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		
		.card {
			background: #f8f8f8;
			padding: 20rpx;
			border-radius: 10rpx;
			text-align: center;
			
			.card-title {
				font-size: 28rpx;
				color: #666;
			}
			
			.card-value {
				font-size: 36rpx;
				color: #007AFF;
				font-weight: bold;
				margin-top: 10rpx;
				display: block;
			}
		}
	}
}
</style> 